﻿@{
    Layout = null;
}

<link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />

<div class="layui-row layui-col-space30">
    <div class="layui-col-md4">
        <div class="grid-demo grid-demo-bg1">
            <div id="ID-tree-demo-showCheckbox"></div>
        </div>
    </div>
    <div class="layui-col-md8">
        <div class="grid-demo">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">上级权限名称</label>
                        <div class="layui-input-inline">
                            <select name="upPermissionId" lay-verify="required" lay-search disabled>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限名称</label>
                    <div class="layui-input-block">
                        <input type="text"
                               name="permissionName"
                               lay-verify="required"
                               placeholder="请输入"
                               autocomplete="off"
                               class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">页面路径</label>
                    <div class="layui-input-block">
                        <input type="text"
                               name="routeUrl"
                               lay-verify="required"
                               placeholder="请输入"
                               autocomplete="off"
                               class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-inline" style="width: 100px">
                            <input type="number"
                                   name="sortId"
                                   placeholder=""
                                   autocomplete="off"
                                   class="layui-input"
                                   min="0"
                                   step="1"
                                   lay-affix="number" />
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否启用</label>
                    <div class="layui-input-block">
                        <input type="checkbox"
                               name="isLock"
                               lay-skin="switch"
                               lay-filter="switchTest"
                               title="ON|OFF" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-primary layui-bg-orange">添加子级</button>
                        <button class="layui-btn layui-btn-primary layui-bg-purple">添加同级</button>
                        <button type="submit" class="layui-btn" lay-submit lay-filter="add">
                            保存
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/layui-v2.5.6/layui/layui.js"></script>

<script>
    layui.use(function(){
      var tree = layui.tree;

      function getpermissions () {
        $.ajax({
          url:'/Permission/PermissionList',
          type:'get',
          dataType:'json',
          success:function(res){
            // 模拟数据
            var data = res;

            // 渲染
            tree.render({
              elem: '#ID-tree-demo-showCheckbox',
              data: data,
              showLine: false,  // 是否开启连接线
              click: function(obj){
                console.log(obj.data);

              }
              //showCheckbox: true,
            });
          }
        })
      }

      getpermissions()

      function getpermissionAll (){
          $.ajax({
              url:'/Permission/PermissionAllList',
              type:'get',
              dataType:'json',
              success:function(res){
                  console.log(res)
                  $("#parentId").empty(); // 清空下拉框旧的选项
                  var html = (`<option value="0">无父级</option>`);
                  res.forEach(function(item) {
                      // 使用 permissionName 添加选项
                      html += (`<option value="${item.id}">${item.permissionName}</option>`);
                  });
                  console.log(html)
                  $("[name='upPermissionId']").html(html)
                  layui.form.render('select')
              }
          })
      }

      getpermissionAll();

      // 提交事件
      form.on('submit(add)', function(data){
        var field = data.field; // 获取表单字段值
        // 显示填写结果，仅作演示用
        layer.alert(JSON.stringify(field), {
          title: '当前填写的字段值'
        });
        return false; // 阻止默认 form 跳转
      });
    });
</script>